<template>
    <div v-if="pageLoading" class="loadingCss">
        <el-icon class="is-loading" size="35px">
            <svg class="circular" viewBox="0 0 50 50">
                <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
            </svg>
        </el-icon>
    </div>
    <div v-else class="page">
        <swiperP :list="bannerList" :height="400"> </swiperP>

        <div class="container" ref="filterRef">
            <!-- 编辑器分类 -->
            <div class="radio-container">
                <RadioButtonGroupP line v-model="topTabActive" :list="topList" />
            </div>

            <template v-if="topList[topTabActive].code == -1">
                <template v-for="(item, index) in cateList" :key="item.id">
                    <div class="tools-container">
                        <div class="page-title">{{ item.name }}</div>
                        <!-- <div class="see-more" @click="onSeeMore(index)">
                            查看更多>>
                        </div> -->
                    </div>

                    <div class="tel-container" v-if="allLoading[item.id] || allList[item.id].length">
                        <TemplateGroupP2 :list="allList[item.id]" />
                    </div>

                    <el-empty :image-size="150" description="换个词搜搜，或者联系客服定制" v-else />
                </template>
            </template>

            <template v-else>
                <div class="filter-container" v-if="topList[topTabActive].code == 'template'">
                    <div class="filter-item">
                        <div class="filter-label">行业：</div>
                        <div class="filter-group">
                            <div class="filter-btn" :class="{ active: cateActive[1] === 0 }" @click="handleTypeClick(1, 0)">
                                全部
                            </div>
                            <div class="filter-btn" v-for="item in industryCateList" :key="item.id"
                                :class="{ active: cateActive[1] === item.id }" @click="handleTypeClick(1, item.id)">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                    <div class="filter-item">
                        <div class="filter-label">面积：</div>
                        <div class="filter-group">
                            <div class="filter-btn" :class="{ active: cateActive[2] === 0 }" @click="handleTypeClick(2, 0)">
                                全部
                            </div>
                            <div class="filter-btn" v-for="item in areaCateList" :key="item.id"
                                :class="{ active: cateActive[2] === item.id }" @click="handleTypeClick(2, item.id)">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="filter-container" v-if="topList[topTabActive].code == 'courseware'">
                    <div class="filter-item">
                        <div class="filter-label">类型：</div>
                        <div class="filter-group">
                            <div class="filter-btn" :class="{ active: cateActive2[0] === 0 }"
                                @click="handleTypeClick(0, 0)">
                                全部
                            </div>
                            <div class="filter-btn" v-for="item in cate2" :key="item.id"
                                :class="{ active: cateActive2[0] === item.id }" @click="handleTypeClick(0, item.id)">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                    <div class="filter-item">
                        <div class="filter-label">行业：</div>
                        <div class="filter-group">
                            <div class="filter-btn" :class="{ active: cateActive2[1] === 0 }"
                                @click="handleTypeClick(1, 0)">
                                全部
                            </div>
                            <div class="filter-btn" v-for="item in GetIndustry()" :key="item.id"
                                :class="{ active: cateActive2[1] === item.id }" @click="handleTypeClick(1, item.id)">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tools-container">
                    <div class="page-title">模板列表</div>
                    <SearchGroupP @search="onSearch" ref="searchRef" />
                </div>

                <div class="tel-container-div" v-if="isLoading || list.length">
                    <div class="tel-container">
                        <TemplateGroupP2 :list="renderList" />
                    </div>
                </div>
                <div class="empty-div" v-else-if="!isLoading && list.length <= 0">
                    <el-empty :image-size="150" description="换个词搜搜，或者联系客服定制" />
                </div>

                <div class="pagination">
                    <el-pagination background layout="prev, pager, next, jumper" :total="list.length"
                        :page-size="pagination.size" :current-page="pagination.page" prev-text="上一页" next-text="下一页"
                        @current-change="pageChangeHandle" :hide-on-single-page="true" />
                </div>
            </template>
        </div>
    </div>
</template>
<script setup>
import { useContent } from ".";
import { SetPlatformModuleViews } from "~/api";
const cacheStore = useCacheStore();
const pageLoading = ref(true)

const {
    searchRef,
    keyword,
    cateActive,
    cateActive2,
    bannerList,
    topTabActive,
    cateList,
    topList,
    typeCateList,
    areaCateList,
    industryCateList,
    cate2,
    list,
    allList,
    allLoading,
    pagination,
    filterRef,
    isLoading,
    onSeeMore,
    GetIndustry,
    GetList,
    GetAllList,
    pageChangeHandle,
    handleTypeClick,
    onSearch,
    getTemplateCategory,
    GetType,
    getBanner,
} = useContent();

const renderList = computed(() => {

    return list.value.length
        ? list.value.slice(
            (pagination.value.page - 1) * pagination.value.size,
            pagination.value.page * pagination.value.size
        )
        : [];
});

watch(() => cacheStore.key, async () => {
    await GetType();
    await GetAllList();

    await Promise.all([
        getTemplateCategory(),
        SetPlatformModuleViews({ name: "模板库" }),
        getBanner(181),
    ]);
})

onBeforeMount(async () => {
    await GetType();
    await GetAllList();
    await getBanner(181);
    pageLoading.value = false
    await getTemplateCategory();
    SetPlatformModuleViews({ name: "模板库" })
});



</script>
<style lang="scss" scoped>
.loadingCss {
    background: rgba(255, 255, 255, 0.1);
    width: 100%;
    min-height: calc(100vh - 100px);
    display: flex;
    justify-content: center;
    align-items: center;

    .is-loading {
        animation: rotating 0.8s linear infinite;
    }

    .circular {
        display: inline;
        height: var(--el-loading-spinner-size);
        width: var(--el-loading-spinner-size);
        animation: 2s linear 0s infinite normal none running loading-rotate;

        .path {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: 0;
            stroke-width: 3;
            stroke: var(--el-color-primary);
            stroke-linecap: round;
            animation: 1.5s ease-in-out 0s infinite normal none running loading-dash;
        }
    }
}

.page {
    background-color: #F4F8FB;
}

.bg {
    width: 100%;
    height: 400px;
    background: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/template/bg.jpg") no-repeat 50% 0 / cover;
    z-index: 10;
}

.container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px 0 90px;
}

.radio-container {
    margin-bottom: 10px;
}

.filter-container {
    padding: 25px 20px;
    background-color: #fff;
    border-radius: 10px;

    .filter-item {
        display: flex;
        align-items: center;
        margin-bottom: 32px;

        &:last-of-type {
            margin-bottom: 0;
        }

        .filter-label {
            display: flex;
            align-items: center;
            height: 28px;
            flex-shrink: 0;
            font-size: 14px;
            color: #666;
            padding-right: 20px;
            align-self: flex-start;
        }

        .filter-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 0;
            align-content: space-between;
        }

        .filter-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #333;
            padding: 0 16px;
            height: 28px;
            cursor: pointer;
            margin-right: 20px;
            border: 1px solid transparent;
            border-radius: 4px;

            &:hover {
                color: #5085fb;
                background-color: rgba(75, 68, 250, 0.1);
                border-color: #5085fb;
            }

            &.active {
                background-color: #5085fb;
                border-color: #5085fb;
                color: #fff;
            }
        }
    }
}

.tools-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

    .page-title {
        color: #333;
        font-weight: 600;
        font-size: 28px;
    }

    .see-more {
        color: #5085fb;
        cursor: pointer;
        text-decoration: none;
    }
}

.empty-div,
.tel-container-div {
    min-height: calc(100vh - 200px);
}

.tel-container {
    margin-top: 20px;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 19px;
    user-select: none;

    :deep(.el-pager) {
        li {
            width: 32px;
            height: 30px;
            border-radius: 6px;
            background-color: #fff;
            font-size: 16px;
            font-weight: 500;
        }
    }

    :deep(.el-pagination) {
        &.is-background {

            .btn-next,
            .btn-prev {
                background-color: #fff;
                padding: 0 10px;
                border-radius: 6px;
            }
        }
    }
}
</style>
